<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Title</title>
	</head>
	<body>
		<div id="app">
			<!-- 遍历数组,不加key是 -->
			<ul>
				<li v-for="item in letters">
					{{item}}
				</li>
			</ul>
			<button type="button" @click="btnClick">点击</button>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app =new Vue({
				el:'#app',
				data:{
					letters:[
					'A',
					'B',
					'C',
					'D',
					]
				},
				methods:{
					btnClick(){
						// splice的方法
						
						
						
						// 响应的方法
						// 1.push方法
						// this.letters.push('a');
						// 2.pop方法
						// this.letters.pop('a');
						// 3.shift方法
						// this.letters.shift();
						// 4.unshift方法
						// this.letters.unshift('a');
						// 5.splice方法
						// 5.1删除
						// this.letters.splice(1); 删除索引1以及之后所有的数
						// this.letters.splice(1,1); 删除索引1和后一位
						// 5.2替换
						// this.letters.splice(1,1,'a');
						// 5.3插入
						// this.letters.splice(1,0,'a');
						// 6.sort方法
						// this.letters.sort();
						// 7.reverse方法
						// this.letters.reverse();
						
						// 非响应方法
						// this.letters[1] = 'a';
						// 索引值修改
						// 在控制台上打印出来的是[ "A", "a", "C", "D" ]但是在视图上一点变化也没有,是因为这种方法vue没有去监听
						// 替代方案1
						// this.letters.splice(1,1,'a');
						// 替代方案2 set(要修改的对象,索引值,修改后的值)
						// Vue.set(this.letters,1,'a')
					}
				}
			})
			
			// 确定参数
			// function sunm(num1,num2){
			// 	return num1+num2;
			// }
			
			
			// 可变参数 ,可以随便传几个函数
			function sum(...num){
				let sum = 0;
				for(let item of num){	//注意不能是in 
					sum += item;
				}
				console.log(sum);
				console.log(num);	//打印出的是一个数组
			}
			sum(1,2,3,4,5);
			// 在用unshift方法的时候可以传入多个值是因为,其参数是用...来定义的
		</script>
	</body>
</html>
